<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-21 16:18:25
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom4_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Bar } from '@antv/g2plot';
export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods:{
    // 3. 初始化图表
    initChart(){
    
      const data = [
        { year: '必须维修', value: 38 },
        { year: '需要维修', value: 52 },
        { year: '不可工作', value: 61 },
        { year: '报废', value: 21 },
      ];
      const bar = new Bar(this.$refs.bottom4_container, {
        data,
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: {
          position: 'top-left',
        },
        itemStyle : {  
                normal : {  
                	color: "red",//图例的颜色
                }  
            },
        xAxis: {
            label: {
              style: {
                fill: "white",
                fontFamily: "TencentSans",
                fontSize: 16,
              },
            },
          },
        yAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            }
          }
        }
      });

      bar.render();
    }
  }
}
</script>